<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程资料库 - 在线考试系统</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/all.min.css">
    <style>
        :root {
            --primary: #4361ee;
            --primary-dark: #3a56d4;
            --secondary: #3f37c9;
            --accent: #4cc9f0;
            --light: #f8f9fa;
            --dark: #212529;
            --border: #e0e7ff;
            --success: #4caf50;
            --warning: #ff9800;
            --info: #2196f3;
        }
        
        body {
            background-color: #f5f7ff;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            color: #333;
        }
        
        .navbar {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            box-shadow: 0 2px 10px rgba(67, 97, 238, 0.2);
            padding: 0.8rem 0;
        }
        
        .navbar-brand {
            font-weight: 700;
            font-size: 1.4rem;
        }
        
        .user-info {
            color: rgba(255,255,255,0.9);
            font-size: 0.95rem;
            margin-right: 15px;
        }
        
        .page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.8rem;
            padding-bottom: 0.8rem;
            border-bottom: 1px solid var(--border);
        }
        
        .page-title {
            font-weight: 700;
            color: var(--dark);
            margin: 0;
            display: flex;
            align-items: center;
            font-size: 1.8rem;
        }
        
        .page-title i {
            margin-right: 12px;
            color: var(--primary);
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 1.8rem;
        }
        
        .course-card {
            margin-bottom: 2.5rem;
            box-shadow: 0 6px 20px rgba(67, 97, 238, 0.12);
            border-radius: 14px;
            border: none;
            overflow: hidden;
            transition: all 0.3s ease;
            background: #fff;
        }
        
        .course-card:hover {
            transform: translateY(-7px);
            box-shadow: 0 12px 30px rgba(67, 97, 238, 0.18);
        }
        
        .course-card .card-header {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: #fff;
            font-weight: 700;
            font-size: 1.3rem;
            padding: 1.2rem 1.8rem;
            border-radius: 0;
            display: flex;
            align-items: center;
            border-bottom: 3px solid rgba(255,255,255,0.15);
        }
        
        .course-card .card-header i {
            margin-right: 12px;
            font-size: 1.3rem;
            background: rgba(255,255,255,0.2);
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .table-container {
            overflow-x: auto;
            border-radius: 0 0 12px 12px;
        }
        
        .table {
            margin-bottom: 0;
            font-size: 0.95rem;
            border-collapse: separate;
            border-spacing: 0;
        }
        
        .table th {
            background-color: #f0f4ff;
            font-weight: 600;
            color: var(--primary-dark);
            padding: 1.1rem 1.5rem;
            border-top: none;
            border-bottom: 2px solid var(--border);
        }
        
        .table td {
            padding: 1.1rem 1.5rem;
            border-top: 1px solid var(--border);
            vertical-align: top;
        }
        
        .table tbody tr {
            transition: background-color 0.2s;
        }
        
        .table tbody tr:nth-child(even) {
            background-color: #fafbff;
        }
        
        .table tbody tr:hover {
            background-color: #f0f5ff;
        }
        
        .question-type {
            display: inline-block;
            padding: 0.35rem 1rem;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
            min-width: 70px;
            text-align: center;
        }
        
        .type-choice {
            background-color: #e3f2fd;
            color: #1976d2;
            border: 1px solid #bbdefb;
        }
        
        .type-multiple {
            background-color: #e8f5e9;
            color: #388e3c;
            border: 1px solid #c8e6c9;
        }
        
        .type-fill {
            background-color: #fff8e1;
            color: #ff8f00;
            border: 1px solid #ffecb3;
        }
        
        .type-essay {
            background-color: #f3e5f5;
            color: #7b1fa2;
            border: 1px solid #e1bee7;
        }
        
        .option-list {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        .option-list li {
            padding: 6px 0;
            position: relative;
            padding-left: 28px;
            line-height: 1.5;
        }
        
        .option-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.85rem;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent), #3a86ff);
        }
        
        .answer-badge {
            display: inline-block;
            padding: 0.45rem 1rem;
            background-color: #e8f5e9;
            color: #388e3c;
            border-radius: 8px;
            font-weight: 500;
            font-size: 0.95rem;
            border: 1px solid #c8e6c9;
        }
        
        .score-badge {
            display: inline-block;
            padding: 0.45rem 1rem;
            background: linear-gradient(135deg, #fff8e1, #ffecb3);
            color: #ff8f00;
            border-radius: 8px;
            font-weight: 700;
            font-size: 0.95rem;
            min-width: 60px;
            text-align: center;
            border: 1px solid #ffecb3;
        }
        
        .empty-content {
            padding: 2.5rem;
            text-align: center;
            background: #f9faff;
            border-radius: 12px;
            margin: 2rem 0;
            border: 1px dashed var(--border);
        }
        
        .empty-content i {
            font-size: 4rem;
            color: #d0d9ff;
            margin-bottom: 1.5rem;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .empty-content h4 {
            color: var(--primary-dark);
            margin-bottom: 0.8rem;
        }
        
        .empty-content p {
            color: #6c757d;
            font-size: 1.05rem;
            max-width: 600px;
            margin: 0 auto 1.5rem;
        }
        
        .footer {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 2rem 0;
            margin-top: auto;
        }
        .student .footer {
            background: linear-gradient(135deg, var(--primary), #3a0ca3);
        }
        .copyright {
            text-align: center;
            padding-top: 1.5rem;
            margin-top: 1.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
        }
        
        .question-content {
            font-weight: 500;
            color: #2d3748;
            line-height: 1.6;
        }
        
        .no-questions {
            text-align: center;
            padding: 1.5rem;
            color: #6c757d;
            font-style: italic;
        }
        
        .badge-count {
            display: inline-block;
            background: rgba(255,255,255,0.25);
            border-radius: 20px;
            padding: 0.15rem 0.8rem;
            margin-left: 12px;
            font-size: 0.9rem;
            font-weight: 500;
        }
        
        @media (max-width: 768px) {
            .page-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 1.2rem;
            }
            
            .course-card .card-header {
                font-size: 1.15rem;
                padding: 1rem;
            }
            
            .table th, .table td {
                padding: 0.9rem;
            }
            
            .page-title {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
        <a class="navbar-brand" href="#">
            <i class="fas fa-graduation-cap"></i>在线考试系统
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="/home/manage"><i class="fas fa-home"></i> 主页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/student/exam/list"><i class="fas fa-pen-alt"></i> 考试信息</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/student/score/analysis"><i class="fas fa-chart-line"></i> 成绩分析</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/student/resources"><i class="fas fa-book-open"></i> 学习资源</a>
                </li>
            </ul>

            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/student/profile/manage">
                        <i class="fas fa-user-circle"></i> 个人信息
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="/logout">
                        <i class="fas fa-sign-out-alt"></i> 退出登录
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>


<div class="container mt-4">
    <div class="page-header">
        <h1 class="page-title"><i class="fas fa-book-open"></i>课程资料库</h1>
        <form class="row g-3 mb-0" method="get" action="/student/resources" style="max-width: 600px;">
            <div class="col-md-5">
                <input type="text" class="form-control" name="courseName" placeholder="课程名称" th:value="${param.courseName}">
            </div>
            <div class="col-md-4">
                <select class="form-select" name="type">
                    <option value="">全部题型</option>
                    <option value="choice" th:selected="${param.type == 'choice'}">选择题</option>
                    <option value="multiple" th:selected="${param.type == 'multiple'}">多选题</option>
                    <option value="fill" th:selected="${param.type == 'fill'}">填空题</option>
                    <option value="essay" th:selected="${param.type == 'essay'}">简答题</option>
                </select>
            </div>
            <div class="col-md-3">
                <button type="submit" class="btn btn-primary w-100"><i class="fas fa-search me-1"></i>搜索</button>
            </div>
        </form>
    </div>
    
    <!-- 课程资料卡片 - 使用Thymeleaf渲染 -->
    <div th:if="${courseList != null && !#lists.isEmpty(courseList)}">
        <div th:each="course : ${courseList}">
            <div class="card course-card">
                <div class="card-header">
                    <i class="fas fa-book"></i>
                    <span th:text="${course.courseName}"></span>
                    <span class="badge-count" th:text="${#lists.size(course.questions)} + '题'"></span>
                </div>
                <div class="card-body p-0">
                    <div class="table-container">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>题目类型</th>
                                    <th>题目内容</th>
                                    <th>选项</th>
                                    <th>答案</th>
                                    <th>分值</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:if="${course.questions == null or #lists.isEmpty(course.questions)}">
                                    <td colspan="5" class="no-questions">此课程暂无试题</td>
                                </tr>
                                <tr th:each="question : ${course.questions}">
                                    <td>
                                        <span th:switch="${question.type}">
                                            <span class="question-type type-choice" th:case="'choice'">选择题</span>
                                            <span class="question-type type-multiple" th:case="'multiple'">多选题</span>
                                            <span class="question-type type-fill" th:case="'fill'">填空题</span>
                                            <span class="question-type type-essay" th:case="'essay'">简答题</span>
                                            <span class="question-type" th:case="*">未知类型</span>
                                        </span>
                                    </td>
                                    <td class="question-content" th:text="${question.content}"></td>
                                    <td>
                                        <div th:if="${question.type == 'choice' || question.type == 'multiple'}">
                                            <ul class="option-list">
                                                <th:block th:with="options=${#strings.arraySplit(question.options, ',')}">
                                                    <li th:each="option, stat : ${options}">
                                                        <span th:text="${#strings.substring('ABCDEFGHIJKLMNOPQRSTUVWXYZ', stat.index, stat.index + 1) + '. ' + #strings.replace(#strings.replace(option, '[', ''), ']', '')}"></span>
                                                    </li>
                                                </th:block>
                                            </ul>
                                        </div>
                                        <span th:unless="${question.type == 'choice' || question.type == 'multiple'}">-</span>
                                    </td>
                                    <td>
                                        <span class="answer-badge" th:text="${question.answer}"></span>
                                    </td>
                                    <td>
                                        <span class="score-badge" th:text="${question.score} + '分'"></span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 无课程资料提示 -->
    <div th:if="${courseList == null || #lists.isEmpty(courseList)}">
        <div class="empty-content">
            <i class="fas fa-folder-open"></i>
            <h4>暂无课程资料</h4>
            <p>当前没有可用的课程资料，请联系老师获取更多信息或稍后再试</p>
            <button class="btn btn-primary"><i class="fas fa-sync-alt me-1"></i>刷新页面</button>
        </div>
    </div>
    

</div>
<!-- 页脚 -->
<footer class="footer">
    <div class="container text-center py-4">
        <a href="https://gitee.com/sorrymaker04/onlineexam-workload" target="_blank"><i class="fab fa-github fa-2x"></i></a>
        <div class="copyright mt-2">
            &copy; 2025 版权所有 北城在线考试系统小组 12 Team
        </div>
    </div>
</footer>
<script src="/js/bootstrap.bundle.min.js"></script>
</body>
</html>